﻿@{
    ViewBag.Title = "BootstrapTable";
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/font-awesome/css/font-awesome.css" rel="stylesheet" />
    <link href="~/Scripts/BootstrapTable/bootstrap-table.css" rel="stylesheet" />

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/BootstrapTable/bootstrap-table.js"></script>
    <script src="~/Scripts/BootstrapTable/bootstraptable.js"></script>
}

<section>
    <div class="row" style="margin-top:50px;">
        <div class="col-lg-offset-2 col-lg-8">

            名称<input id="name" />
            描述<input id="desc" />
            X<input id="x" />
            Y<input id="y" />
            <button id="hehe">查询</button>
            <br />
            <br />
            <button id="delete">删除</button>
            <br />
            <br />
            <table id="table" data-toggle="table"
                   data-query-params="postQueryParams"
                   data-url="@Url.Action("GetData", "BootstrapTable")"
                   data-sort-name="Id"
                   data-sort-order="desc"
                   data-method="post">
                <thead>
                    <tr>
                        <th data-field="state" data-checkbox="true"></th>
                        <th data-field="Id" data-sortable="true">Id</th>
                        <th data-field="Description" data-formatter="DescriptionFormatter">描述</th>
                        <th data-field="PointX" data-sortable="true">X坐标</th>
                        <th data-field="PointY" data-sortable="true">Y坐标</th>
                        <th data-formatter="opFormatter">操作</th>
                    </tr>
                </thead>
            </table>

        </div>
    </div>
</section>
<script>
    var $table = $('#table');

    function verifyChoose() {
        var items = $table.bootstrapTable('getSelections');
        var length = items.length;
        if (length <= 0) {
            alert("请至少选择一项。");
            return false;
        }
        return true;
    }


    function postQueryParams(params) {
        params.Name = $("#name").val();
        params.Description = $("#desc").val();
        params.X = $("#x").val();
        params.Y = $("#y").val();
        return params; // body data
    }

    function opFormatter(value, row) {
        var result = "";
        result += '<button class="btn btn-sm btn-primary" title="编辑" data-href="#">编辑' + row.Id + '</button>';
        return result;
    }

    $(function () {

        $("#hehe").click(function () {
            $table.bootstrapTable('refresh');
        });

        $("#delete").click(function () {
            var result = [];
            if (verifyChoose()) {
                var items = $table.bootstrapTable('getSelections');
                $.each(items, function (index, element) {
                    result.push({ name: "ids", value: element.Id });
                });

                var url = '@Url.Action("Delete")';
                $.post(url, result, function (data) {
                    console.log(data);
                    $table.bootstrapTable('refresh');
                });
            }
        });
    });

</script>
